<template>
 <div class="ubuttom">
    <div class="tab">
      <div class="item" @click="toChange('/')">
        <div class="icon " :class="active=='/'?'ick':''">
          <img src="../assets/img/tab/ic1.png" alt=""  class="img" v-if="active=='/'" />
          <img src="../assets/img/tab/ic1s.png" alt=""  class="img" v-else/>
        </div>
        <div class="txt" :class="active=='/'?'act':''">{{$t('m.首页')}}</div>
      </div>
      <div class="item" @click="toChange('/Pledge')">
        <div class="icon" :class="active=='/Pledge'?'ick':''">
          <img src="../assets/img/tab/ic2.png" alt=""  class="img" v-if="active=='/Pledge'" />
          <img src="../assets/img/tab/ic2s.png" alt=""  class="img" v-else/>
        </div>
        <div class="txt" :class="active=='/Pledge'?'act':''">{{$t('m.FP质押')}}</div>
      </div>
   
      <div class="items" @click="menuopen()">
        <img src="../assets/img/tab/mm.png" alt=""  class="img" />
      </div>
     
      <div class="item" @click="toChange('/National')">
        <div class="icon" :class="active=='/National'?'ick':''">
          <img src="../assets/img/tab/ic3.png" alt=""  class="img" v-if="active=='/National'" />
          <img src="../assets/img/tab/ic3s.png" alt=""  class="img" v-else/>
        </div>
        <div class="txt" :class="active=='/National'?'act':''">{{$t('m.国库债券')}}</div>
      </div>
      <div class="item" @click="toChange('/Bond')">
        <div class="icon" :class="active=='/Bond'?'ick':''">
          <img src="../assets/img/tab/ic4.png" alt=""  class="img" v-if="active=='/Bond'" />
          <img src="../assets/img/tab/ic4s.png" alt=""  class="img" v-else/>
        </div>
        <div class="txt" :class="active=='/Bond'?'act':''">{{$t('m.LP债券')}}</div>
      </div>
    </div>
    <van-popup
      v-model="clmenuShows"
      position="right"
      :style="{ height: '100%', 
      width:'50%',
      border:'1px solid #FF7C36',
      background: '#130700'}"
    >
    <div class="sfelx" >
      <div class="mentop">
        <div class="slogs">
           <img src="../assets/img/nlogo.png" alt="" class="logo" />
        </div>
        <!-- <img src="../assets/img/gbn.png" alt="" class="close" @click="toChange()"/> -->
      </div>
     
         <div class="menulist">
        <div class="menuitem" :class="active=='/'?'act':''" @click="toChange('/')">
          <div class="left">
            <div class="txt">{{$t('m.首页')}}</div>
          </div>  
          <div class="right">
            <img src="../assets/img/icright.png" alt="" v-if="active=='/'"/>
            <img src="../assets/img/icrights.png" alt="" v-else />
          </div>           
        </div>

          <div class="menuitem " :class="active=='/Pledge'?'act':''" @click="toChange('/Pledge')">
          <div class="left">
            <div class="txt">{{$t('m.FP质押')}}</div>
          </div>  
          <div class="right">
               <img src="../assets/img/icright.png" alt="" v-if="active=='/Pledge'"/>
            <img src="../assets/img/icrights.png" alt="" v-else />
          </div>           
        </div>
        <div class="menuitem " :class="active=='/National'?'act':''" @click="toChange('/National')">
          <div class="left">
            <div class="txt">{{$t('m.国库债券')}}</div>
          </div>   
          <div class="right">
               <img src="../assets/img/icright.png" alt="" v-if="active=='/National'"/>
            <img src="../assets/img/icrights.png" alt="" v-else />
          </div>          
        </div>
         <div class="menuitem " :class="active=='/Bond'?'act':''" @click="toChange('/Bond')">
          <div class="left">
            <div class="txt">{{$t('m.LP债券')}}</div>
          </div>   
          <div class="right">
               <img src="../assets/img/icright.png" alt="" v-if="active=='/Bond'"/>
            <img src="../assets/img/icrights.png" alt="" v-else />
          </div>      
        </div>
        <div class="menuitem " :class="active=='/myCommunity'?'act':''" @click="toChange('/myCommunity')">
          <div class="left">
            <div class="txt">{{$t('m.我的社区')}}</div>
          </div>   
          <div class="right">
               <img src="../assets/img/icright.png" alt="" v-if="active=='/myCommunity'"/>
            <img src="../assets/img/icrights.png" alt="" v-else />
          </div>          
        </div>
        <div class="menuitem " :class="active=='/news'?'act':''" @click="toChange('/news')">
          <div class="left">
            <div class="txt">{{$t('m.公告列表')}}</div>
          </div>   
          <div class="right">
               <img src="../assets/img/icright.png" alt="" v-if="active=='/news'"/>
            <img src="../assets/img/icrights.png" alt="" v-else />
          </div>          
        </div>
        <div class="menuitem " :class="active=='/Turbine'?'act':''" @click="toChange('/Turbine')">
          <div class="left">
            <div class="txt">{{$t('m.涡轮池')}}</div>
          </div>   
          <div class="right">
               <img src="../assets/img/icright.png" alt="" v-if="active=='/Turbine'"/>
            <img src="../assets/img/icrights.png" alt="" v-else />
          </div>          
        </div>
          <div class="menuitem " v-if="isOpen" :class="active=='/statistics'?'act':''" @click="toChange('/statistics')">
          <div class="left">
            <div class="txt">{{$t('m.业绩统计')}}</div>
          </div>   
          <div class="right">
               <img src="../assets/img/icright.png" alt="" v-if="active=='/statistics'"/>
            <img src="../assets/img/icrights.png" alt="" v-else />
          </div>          
        </div>
        
        <div class="menuitem "   @click="toOpen('https://future-protocol.com/')">
          <div class="left">
            <div class="txt">{{$t('m.官网')}}</div>
          </div>   
          <div class="right">
               <img src="../assets/img/icright.png" alt="" v-if="active=='/web'"/>
            <img src="../assets/img/icrights.png" alt="" v-else />
          </div>      
        </div>
      
      </div>
</div> 
    </van-popup>
  </div>
</template>

<script>
export default {
    data(){
      return{
        clmenuShows:false,
        active:'/',
         isOpen:true
      }
    },
    created(){
      this.active=this.$route.path;
    },
    methods:{
      toChange(e){
        this.active=e
        this.clmenuShows=false
        this.$router.push({path:e})
      },
      menuopen() {
    this.active=this.$route.path;
      this.clmenuShows = true;
    },
      toOpen(url) {
       window.open(url)
    },
    }
  }
</script>

<style lang="scss" scoped>  
  .ubuttom {
    margin: 0;
    position: fixed;
    bottom: 0px;
    left: 0%;
    right: 0px;
    width: 100%;
    z-index: 99;
    .item{    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}
    .tab{
      background:#130700;
      max-width: 750px;
    color: rgb(255, 255, 255);
    padding: 0  42px 16px;
    border-top: 1px solid #582204;
    margin: 18px auto 0;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    .item{
      .icon{
        width: 92px;
        height: 72px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
      }
      .ick{
        background: url("../assets/img/tab/tabbg.png")  no-repeat;
        background-size: 100% 100%;
      }
      .img{
        width: auto;
        height: 32px;
        margin-bottom: 8px;
      }
      .txt{
        margin: 0px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 0.00938em;
    font-family: sans-serif;
    text-transform: none;
    color: rgb(141, 141, 141);
    font-size: 20px;
      }
      .act{
        color: #FF7C36;
      }
    }
    .items{
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius:16px ;
      width: 80px;
      height: 80px;
      min-width: 80px;
      margin-top: 20px;
      img{
        width: 100%;
        height: 100%;

      }
    }
    }
  }
  .menu{
        width: 58px;
height: 58px;
border: 1px solid #F89C8A;
background: #3b3b3b;
padding: 5px;
border-radius: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
margin-left: 12px;
.img{
  width: 32px;
}
      }
      .flexright{
        display: flex;
        align-items: center;
            .lang {
        font-size: 22px;
        font-weight: 600;
       color: #ffffff;
   
       margin-right: 32px;
        line-height: 42px;
        // margin-left: 20px;
      }
      }
  

  .sfelx{
    display: flex;
    flex-direction: column;
    height: 100%;
    background-size:contain;
    background-position: center top;
  }

  .mentop {
    display: flex;
    align-items: center;
    margin: 80px 84px 40px;
    position: relative;    
justify-content: flex-start;
    .slogs{
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
   .logo {
      height: 120px;
    }
  
    }
    .close{
      position: absolute;
      right: 0;
      top: 0px;
      width: 56px;
      height: 56px;
    }
    .gb {
      font-size: 32px;
font-weight: 600;
color: #FFFFFF;
line-height: 44px;
margin-left: 12px;
    }
  }
  .menulist {
    .menuitem {
      display: flex;
      align-items: center;      
    justify-content: space-between;
      margin: 30px;
      padding-bottom: 40px;
      border-bottom: 1px solid #582204;
      .left {
        margin-right: 12px;
        text-align: left;
        display: flex;
        img {
          height: 44px;
          width: 44px;
        }
        .txt {
          font-size: 28px;
          color: #6a6a6a;
          line-height: 50px;
        }
      }
      .right {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        img{
          width: auto;
          height: 24px;
        }
      }
    }
    .act{
       .txt {
        color: #FF7C36 !important;
       }
    }
  }
  .foot{
        display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    padding: 40px;
    .lang{
      display: flex;
      align-items: center;      
    justify-content: center;
    border: 1px solid #fc00ff;
    width: 340px;
    height: 68px;
    border-radius: 18px;
    margin: 10px auto 40px;
    .bbox{
      display: flex;
      align-items: center;      
    justify-content: center;
    }
      .limg{
        height: 40px;
        width: 40px;
        border-radius: 100%;
      }
      .ttl{
        font-size: 24px;
font-weight: 600;
color: #FFFFFF;
line-height: 34px;
margin-left: 10px;
margin-right: 10px;
      }
      .dwimg{
        width: 32px;
        margin-left: 10px;
      }
    }
    .btn{
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 100px;
          height: 68px;
          width: 100%;
          font-size: 24px;
      color: #ffffff;
          background: linear-gradient(188.1deg, rgb(175, 57, 239) 18.52%, rgb(139, 61, 206) 71.67%);
    }
    .price{
      font-size: 24px;
font-weight: 600;
color: #FFFFFF;
line-height: 34px;
margin: 18px 0;
text-align: left;
.num{
  margin-left: 20px;
}
    }
    .imgline{
      display: flex;
      align-items: center;
    }
    .slog{
      height: 44px;
      width: 44px;
      margin: 20px;
    }
  }
</style>
